<template>
	<view class="index">
		<view class="jtop">
			<view class="status_bar"><!-- 这里是状态栏 --></view>
			<view class="jtop_l" @tap="navigateBack"><image src="../../static/img/ic_back.png"></image></view>
			<!-- <view class="jtop_l" @tap="navigateBack">取消</view> -->
			<view class="jtop_c">{{jtitle}}</view>
			<view class="jtop_r" @tap="to_add"><image src="../../static/img/doc/ic_add.png"></image></view>
		</view>
		<view class="tophr"></view>
		
		<view class="ztj">
			<view class="ztj_b">
				<view class="ztj_bt">应付金额(元)</view>
				<view class="ztj_bf">{{data_one?data_one:'0.00'}}</view>
			</view>
			<view class="ztj_li"></view>
			<view class="ztj_b">
				<view class="ztj_bt">已付金额(元)</view>
				<view class="ztj_bf ztj_bf2">{{data_two?data_two:'0.00'}}</view>
			</view>
			<view class="ztj_li"></view>
			<view class="ztj_b">
				<view class="ztj_bt">未付金额(元)</view>
				<view class="ztj_bf ztj_bf3">{{data_three?data_three:'0.00'}}</view>
			</view>
			
		</view>
		
		<view class="zbt">
			支出明细
		</view>
		
		<!-- 无内容 -->
		<view class="no"  v-if="!nodata">
			<view class="no_t">
				<image src="../../static/img/index/2/ic_no data_grey.png"></image>
			</view>
			<view class="no_c">
				暂无数据
			</view>
		</view>
		
		
		<view class="bl" v-if="nodata">
			
			
			<view class="blb" @tap="to_more(index,item.id)" v-for="(item, index) in items" :key="item.id">
				<view class="blb_l">
					<view class="blb_lt">
						支出
					</view><text class="blb_lt_text">-{{item.amountTxt}}</text>
					<view class="blb_lf">
						{{item.payTime}}
					</view>
				</view>
			</view>
			
			
			
			
		</view>


		
				
	

	</view>
</template>

<script>import request from '@/common/request.js'
	import {
		mapState
	} from 'vuex'

	export default {
		data() {
		    return {
				repeat_click:true,
		       ashowpop: false,
		       ashowpop_jrename: false,
		       ashowpop_jdel: false,
		       ashowpopT: false,
		       bj: false,
		       yd:false,
		       
		       jtitle:"",
		       data_one:"",
		       data_two:"",
			   data_three:"",
		       id:"",
		       
		       nodata:true,
		       items:[],
		       name:""
		    }
		},
		onShow(){
			this.data_one= uni.getStorageSync("temp_data2").totalAmountTxt;
			this.data_two= uni.getStorageSync("temp_data2").payedAmountTxt;
			this.data_three= uni.getStorageSync("temp_data2").totalAmountTxt - uni.getStorageSync("temp_data2").payedAmountTxt;
			this.id = uni.getStorageSync("temp_data2").id;
			this.jtitle = uni.getStorageSync("temp_data2").name;
			this.data_add(this.id);		
		},
		
		
		methods: {
			data_add(a){
				this.projectId = uni.getStorageSync("dqfull_name").id;
			
				request({
					url: `/modor/v1/project/${this.projectId}/work/group/payment/list`, 
					method :"GET",
					data:{
						workGroupId:a
					},
					
					success: (res) => {
						console.log("2项目列表信息",res)
						console.log(res.data.length)
						
						
						if (res.statusCode == 200) {
								if(res.data.length > 0){
									this.items = res.data;
									console.log(this.items);
									this.nodata = true;
								}else{
									this.items = "";
									this.nodata = false;
								}
						} else {
												this.repeat_click = true;
					uni.showToast({
								title: res.data.msg,
								icon: 'none'
							});
						}
					},
					fail: () => {
											this.repeat_click = true;
					uni.showToast({
							title: '服务器开小差，请稍后~',
							icon: 'none'
						});
						return false;
					}
				});
						
			},
			
			
			
			
			to_more(e) {
				uni.setStorageSync("temp_data3",this.items[e])
				uni.navigateTo({
					url: '../main/bclose_listtwo_more',
				});
				
				
			},
			
			to_add() {
				uni.navigateTo({
					url: '../main/close_listtwo_add',
				});
			},
			// 跳转
			jshow_pop() {
				this.ashowpop = !this.ashowpop;
			},
			btTC2() {
				uni.navigateTo({
					url: '../main/work_add',
				});
			},
			
		
			navigateBack(){
				uni.navigateBack()
			}
		},
		computed: mapState(['forcedLogin', 'hasLogin', 'userName']),
	}
</script>

<style>
.bl{ width: 100%; height: auto;display: block;float: left; background: #ffffff; border: 1px solid #DDDDDD; border-left: 0; border-right: 0;  margin: 20rpx 0 0;}	
.blb{width: 720rpx; margin: 0 0 0rpx 30rpx; height: auto;display: block;float: left; border-bottom: 1px solid #DDDDDD;  }
.bl .blb:last-child{border: 0;}
.blb_l{width: 660rpx; margin: 18rpx 0 0rpx 0rpx; height: auto;display: block;float: left;}
.blb_r{width: 16rpx;height: 25rpx;display: block;float: right; margin: 43rpx 30rpx 0 0rpx;}
.blb_lt{width: 100%; height: auto; line-height: 42rpx; display: block;float: left; font-size: 34rpx; color: #000000;}
.blb_lt_text{width: auto; height: auto; line-height: 42rpx; display: block;float: right; font-size: 34rpx;font-weight: bold;color: #000000; margin: -20rpx 0 0rpx 0;}
.blb_lf{width: auto; height: auto; line-height: 32rpx; display: block;float: left; font-size: 24rpx; color: #999999; margin: 10rpx 0 18rpx;}



.tophr{ width: 100%; height: 88rpx; }
.uni-searchbar{box-shadow:none}

.at{ width: 160rpx;height: 160rpx; display: block; float: left; margin:0rpx 0 0 0; }
.att{width: 720rpx; margin: 0 0 30rpx 30rpx; height: auto;display: block;float: left;  background: #ffffff; }

.addb_1{width: 720rpx; margin: 20rpx  30rpx 20rpx 30rpx;font-size: 32rpx;
line-height: 4r0px;color: #000000; height: auto;display: block;float: left;  }
.addb_2{width: 720rpx; margin: 0rpx  30rpx 20rpx 30rpx;font-size: 32rpx;
line-height: 4r0px;color: #666666; height: auto;display: block;float: left;  }

.ptt{width: 100%; height: auto;display: block;float: left;  background: #ffffff; border: 1px solid #DDDDDD; border-left: 0; border-right: 0;  margin: 20rpx 0 0;}
.pttl{width: 84rpx; height: 84rpx; display: block;float: left; margin: 18rpx 20rpx 18rpx 30rpx;}
.pttr{width: 400rpx; height: 84rpx; display: block;float: left; margin: 18rpx 0rpx 0rpx 0rpx;}
.pttrt{width: 100%; height: 42rpx; line-height: 42rpx; display: block;float: left; font-size: 34rpx; color: #000000;}
.pttrf{width: 100%; height: 42rpx; line-height: 42rpx; display: block;float: left; font-size: 24rpx; color: #999999;}
.pttjt{width: 16rpx;height: 25rpx;display: block;float: right; margin: 48rpx 30rpx 0 30rpx;}
.ptf{width: 100%; height: auto;display: block;float: left;  background: #ffffff; border: 1px solid #DDDDDD; border-left: 0; border-right: 0;  margin: 20rpx 0 0;}
.ptft{width: 720rpx; margin: 0 0 0 30rpx; height: 90rpx;display: block;float: left;  background: #ffffff; }
.ptft image{width: 48rpx;height: 48rpx;display: block;float: left; margin: 21rpx 20rpx 0 0rpx;}
.ptft text{width: auto;height: 48rpx;display: block;float: left; margin: 21rpx 20rpx 0 0rpx;font-size: 34rpx; line-height: 48rpx; color: #000000;}

.addi2_r{width: auto;height: 48rpx;display: block;float: right; margin: 21rpx 20rpx 0 0rpx;font-size: 34rpx; line-height: 48rpx; color: #999999;}
.addi2_r image{width: 16rpx;height: 25rpx;display: block;float: right; margin: 15rpx 10rpx 0 30rpx;}


.no{width: 100%;height: auto; display: block;float: left;margin: 400rpx 0 0;}
.no_t{width: 200rpx;height: 200rpx; display: block;float: left;margin:0 275rpx; background: #ffffff; border-radius: 200rpx;}
.no_t image{width: 140rpx;height: 140rpx; display: block;float: left;margin: 30rpx;}
.no_c{width: 100%;height: auto; display: block;float: left;margin: 30rpx 0 50rpx;color: #666666;font-size: 32rpx;line-height: 40rpx; text-align: center;}
.no_f{width: 460rpx;
height: 94rpx; line-height: 94rpx; background: #256AFF;
border-radius: 10rpx; display: block;float: left;margin: 0 145rpx;color: #ffffff;font-size: 36rpx; text-align: center;}
.no_f:active{ background: linear-gradient(0deg, rgba(0, 0, 0, 0.199437), rgba(0, 0, 0, 0.199437)), #256AFF;}



.addi2{width: 720rpx; margin: 0 0 0 30rpx; height: 90rpx;display: block;float: left;  background: #ffffff; border-bottom: 1px solid #DDDDDD;}
.addi{width: 100%; height: auto;display: block;float: left;  background: #ffffff; box-shadow: inset 0px 1px 0px #DDDDDD, inset 0px -1px 0px #DDDDDD; margin: 20rpx 0 0;}
.addi2 text{width: 200rpx; height: 90rpx; display: block;float: left; line-height:90rpx;font-size: 34rpx;color: #000000; margin: 0 0 0 0rpx;}
.addi text{width: 200rpx; height: 90rpx; display: block;float: left; line-height:90rpx;font-size: 34rpx;color: #000000; margin: 0 0 0 30rpx;}
.addi input,.addi2 input{width: 480rpx; height: 50rpx; display: block;float: left; margin: 20rpx 30rpx 0 0; text-align: right; line-height:50rpx;font-size: 34rpx;color: #000000;}
.addb{width: 100%; height: auto;display: block;float: left;  background: #ffffff; border: 1px solid #DDDDDD; border-left: 0; border-right: 0;  margin: 20rpx 0 0;}
.addbi{width: 720rpx; margin: 0 0 0 30rpx; height: 90rpx;display: block;float: left;  background: #ffffff; border-bottom: 1px solid #DDDDDD;}
.addb .addbi:last-child{ border: none;}
.addbi .addbil{width: 200rpx; height: 90rpx; display: block;float: left; line-height:90rpx;font-size: 34rpx;color: #000000;}
.addbi .addbir{width: auto; height: 90rpx; display: block;float: left; line-height:90rpx;font-size: 32rpx;color: #000000;}
.addbi image{width: 16rpx;height: 25rpx;display: block;float: right; margin: 33rpx 30rpx 0 30rpx;}
.addi textarea{width: 690rpx; height:150rpx; display: block;float: left; margin: 0rpx 30rpx 20rpx; text-align: left; line-height:40rpx;font-size: 34rpx;color: #000000;}


.index{background: rgb(242,242,242);width: 100%; height: auto;}
.jtop{ width: 100%; height: 88rpx; background: #ffffff; position: fixed; top: 0; left: 0; z-index: 1000;box-shadow: inset 0px -1px 0px #DDDDDD;}
.jtop_l{width: auto; height: 88rpx; display: block;float: left; font-size: 32rpx; color: #000000; line-height: 88rpx; margin: 0 0 0 30rpx;}
.jtop_l image{width: 48rpx; height: 48rpx; display: block;float: left; margin: 20rpx 0 20rpx 0;}
.jtop_lt{margin: 0 0 0 10rpx;}
.jtop_r{width: 48rpx; height: 48rpx; display: block;float: right; margin: 20rpx 20rpx 0 0;}
.jtop_rl{margin: 20rpx 30rpx 0 0;}
.jtop_r{width: 48rpx; height: 48rpx; display: block;float: right; margin: 20rpx 20rpx 0 0;}
.jtop_r image{width: 48rpx; height: 48rpx; display: block;float: left;}

.jtop_c{width: 70%; height: 48rpx; line-height: 48rpx; display: block;float: left; position: fixed; top: 20rpx; left: 15%; text-align: center; font-size: 36rpx;color: #000000;}
.jtop_c image{width: 36rpx; height: 36rpx; display: inline-block; float: none; margin-bottom: -5rpx; margin-left: 5rpx;}
.jtop_b{width: 100%; height: auto; background: #ffffff; position: fixed; top:88rpx; left: 0; z-index: 1001;}

.doc_b22{ opacity: .5;}

.nd{width: 735rpx; height: auto; display: block;float: left;margin: 0 0 0 0rpx; }
.nd_bt{ width: auto; height: 48rpx; display: block;float: right; border: 1px solid #DDDDDD; border-radius: 24rpx; margin: 40rpx 0 40rpx 30rpx;}
.nd_bt text{width: auto; height: 48rpx; display: block;float: left; margin: 0 7rpx 0 18rpx; line-height: 48rpx; color: #666666; font-size: 24rpx; }
.nd_bt image{width: 13rpx; height: 8rpx; display: block; float: left;  margin: 21rpx 14rpx 0 0;}



.tc{width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index:10000; display: block;}
.jtop_bj{width: 100%; height: 100%; background: rgba(0,0,0,.5); position: fixed; top: 0; left: 0; z-index:10000;}
.tc_fbox_bt{width: 100%; height: 90rpx; line-height: 90rpx; display: block; float: left;text-align: center; font-size: 36rpx; color: #000000; border-top: 20rpx solid #F2F2F2; background: #ffffff;}
.tc_fbox{ width: 100%; height: auto; display: block; float: left; background: #F2F2F2; position: fixed; left: 0; bottom: 0; z-index:10001; }
.tc_fbox_bt2{width: 100%; height: 90rpx; line-height: 90rpx; display: block; float: left;text-align: center; font-size: 36rpx; color: #000000; border-top: 0rpx solid #F2F2F2; background: #ffffff;}
.tc_fbox_bt3{width: 100%; height: 90rpx; line-height: 90rpx; display: block; float: left;text-align: center; font-size: 36rpx; color: #000000; border-bottom: 1px solid #DDDDDD; background: #ffffff;}

.ztj{ width:100%; height: auto; display: block; float: left; background: #ffffff; box-shadow: 0px -1px 0px 0px #DDDDDD, 0px 1px 0px 0px #DDDDDD;}
.ztj_li{width: 1px;height: 72rpx;background: #DDDDDD; margin: 40rpx 0  50rpx 0; display: block; float: left;}
.ztj_b{width:32.5%; height: auto; display: block; float: left; margin: 30rpx 0 0 0;}
.ztj_bt{width:100%; height: auto; display: block; float: left; text-align: center; font-size:24rpx ; color: #666666; }
.ztj_bf{width:100%; height: auto; display: block; float: left; text-align: center; font-size:36rpx ;font-weight: bold;color: #000000; margin: 10rpx 0 0 0;}
.ztj_bf2{color: #256AFF;}
.ztj_bf3{color: #FF6600;}
.zbt{width: 100%; height:72rpx; line-height: 72rpx; display: block; float: left;text-align: left; font-size: 28rpx; color: #666666; box-sizing: border-box; padding-left: 30rpx;}
</style>